<template>
  <el-card>
    <el-table
      :data="
        msg.slice(
          (queryInfo.pagenum - 1) * queryInfo.pagesize,
          queryInfo.pagenum * queryInfo.pagesize
        )
      "
      :row-class-name="tableRowClassName"
      onselectstart="return false;"
    >
      <el-table-column prop="english" label="单词" width="140">
      </el-table-column>
      <el-table-column label="中文" width="120">
        <template slot-scope="scope">
          <div
            :class="{ noMask: scope.row.id != maskIndex }"
            @click="openMask(scope.row.id)"
          >
            {{ scope.row.chinese }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sent" label="音标"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">记得</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >忘了</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 50, 100, 1000]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import api from "@/fetch/api";
import axios from "axios";
export default {
  name: "cet6",
  data() {
    return {
      // 单词库
      msg: [],
      // 获取用户列表的参数对象
      queryInfo: {
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 5,
      },
      maskIndex: 0,
      total: 0,
      // 所有角色的数据列表
      rolesList: [],
      // 已选中的角色Id值
      selectedRoleId: "",
    };
  },
  methods: {
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize;
      //this.getUserList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      //this.getUserList();
    },
    // getUserList() {
    //   axios.get("http://localhost:3000/api/personal/cet4").then((res) => {
    //     this.msg = res.data;
    //   });
    // },
    openMask(i) {
      this.maskIndex = this.maskIndex == i ? "" : i;
    },
    handleEdit(row) {
      var b1 = false;
      if (this.maskIndex != row.id) {
        this.openMask(row.id);
      } else if (row.degree == "unfamiliar") {
        this.msg[row.id - 3163].degree = "familiar";
        b1 = true;
      } else if (row.degree == "familiar") {
        this.msg[row.id - 3163].degree = "grasp";
        b1 = true;
      }
      if (b1) {
        api.updateCet(row.id, this.msg[row.id - 3163].degree).then(
          (res) => {
            switch (res.code) {
              case "200":
                console.log("更新成功！");
                break;
              case "401":
                console.log("err401");
                this.err = true;
                break;
            }
          },
          (err) => {
            console.log(err);
          }
        );
      }
    },
    handleDelete(row) {
      var b2 = false;
      if (this.maskIndex != row.id) {
        this.openMask(row.id);
      }
      if (row.degree == "familiar") {
        this.msg[row.id - 3163].degree = "unfamiliar";
        b2 = true;
      } else if (row.degree == "grasp") {
        this.msg[row.id - 3163].degree = "familiar";
        b2 = true;
      }
      if (b2) {
        api.updateCet(row.id, this.msg[row.id - 3163].degree).then(
          (res) => {
            switch (res.code) {
              case "200":
                console.log("更新成功！");
                break;
              case "401":
                console.log("err401");
                this.err = true;
                break;
            }
          },
          (err) => {
            console.log(err);
          }
        );
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.degree === "familiar") {
        return "warning-row";
      } else if (row.degree === "grasp") {
        return "success-row";
      } else {
        return "common-row";
      }
      return "";
    },
  },
  mounted() {
    // axios.get("http://localhost:3000/cet4").then((res) => {
    //   this.msg = res.data;
    //   this.total = res.data.length;
    // });
    api.cet6().then(
      (res) => {
        console.log("开始请求接口");
        switch (res.code) {
          case "200":
            //将获取的词库储存进data中
            this.msg = res.data;
            this.total = res.data.length;
            break;
          case "401":
            console.log("err401");
            this.err = true;
            break;
        }
      },
      (err) => {
        console.log(err);
      }
    );
  },
};
</script>

<style>
.noMask {
  background-color: #606266;
}
.btn-prev {
  width: 70px;
}
.btn-next {
  width: 70px;
}
.el-pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.cell {
  cursor: default;
}
.el-table .warning-row {
  background: #cdd8c8;
}

.el-table .success-row {
  background: rgb(178, 233, 95);
}
.el-table .common-row {
  background: #e4d9d9;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent;
}
</style>
